<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <div class="bg">
            <img src="../assets/images/introduction.png" alt="" onclick="return false">
            <div class="box" id="box" v-html="data" >   
                
            </div>
          
        </div>
        <div class="woods" id="woodList">      
            <img src="../assets/images/wood.png" alt="" id="wood" onclick="return false">   
         
            
                 
        </div> 
        <div class="bottom_img">
             <img src="../assets/images/pic_Introduction.png" alt="" class="bottom" onclick="return false">              
        </div> 

        
    </div>
</template>

<script>
export default {
    name: "myPoints",
    data() {
        return {
            data: ""
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    mounted: async function() {
        setTimeout(() => {
            var boxH = document.getElementById("box").offsetHeight;
            console.log(boxH);
            var woodH = document.getElementById("wood").height;
            console.log(woodH);
            var woodlist = document.getElementById("woodList");
            var num = Math.ceil(boxH / woodH);
            for (var i = 0; i < num; i++) {
                var img = document.createElement("img");
                img.src = "../static/wood.png";
                img.style.width = 90 + "%";
                img.style.marginTop = -9 + "px";
                woodlist.appendChild(img);
            }
        }, 500);
        //请求接口
        var qs = require("qs");
        var response = await this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/game_detail`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token")
            })
        });
        if (response.data.status == 1) {
            this.data = response.data.data;
        } else {
            alert("请求失败：" + response.data.msg);
        }

        console.log(response);
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
    position: relative;
}
.con img {
    width: 90%;
}

.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}

.con #wood {
    margin-top: -9px;
}

.con .box {
    background: #fff;
    position: absolute;
    left: 9%;
    width: 80%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
    z-index: 1;
}

.woods {
    position: relative;
}
.bottom_img {
    height: 200px;
    position: relative;
}
.bottom {
    position: absolute;
    left: 5%;
    top: -30%;
}
</style>
